<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="提现记录" subTitle="" />
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <avue-data-panel :option="option"></avue-data-panel>
    <div class="crud_content">
      <avue-crud :option="crudData.Listoption" :data="crudData.data" :page.sync="crudData.page" v-model="crudData.form"
        @refresh-change="refreshChange" @on-load="onLoad" @selection-change="selectionChange" @select="cellClickHandler">
        <template #menu="{ row, index, size }">
          <el-dropdown @command="(command) => editRow(command, row)"
            v-if="row.state == '1' || row.state == '4' || crudData.userType == '00'">
            <el-icon>
              <More />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <div v-if="crudData.userType == '01' && row.state == '1'">
                  <el-dropdown-item command="daili_success">代理审核成功</el-dropdown-item>
                  <el-dropdown-item command="daili_fail">代理审核失败</el-dropdown-item>
                </div>
                <div v-if="crudData.userType == '00'">
                  <div v-if="!['5', '6', '7', '8', '9'].includes(row.state)">
                    <el-dropdown-item command="admin_success">管理员审核成功</el-dropdown-item>
                    <el-dropdown-item command="admin_fail">管理员审核失败</el-dropdown-item>
                  </div>
                  <div v-if="['5'].includes(row.state)">
                    <el-dropdown-item command="azhuaning">通道转帐中</el-dropdown-item>
                  </div>
                  <div v-if="['7'].includes(row.state)">
                    <el-dropdown-item command="zhuan_success">转帐成功</el-dropdown-item>
                    <el-dropdown-item command="zhuan_fail">转帐失败</el-dropdown-item>
                  </div>
                </div>


              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>

        <template #amountReceive="{ row }">
          <el-tag :key="row.amountReceive" v-if="row.amountReceive && row.amountReceive != '0'" color="#4E9876"
            effect="light" round>
            {{ row.amountReceive }}
          </el-tag>
          <span v-else>-</span>
        </template>
        <template #failCause="{ row }">
          <span v-if="row.failCause">{{ row.failCause }}</span>
          <span v-else>-</span>
        </template>
        <template #state="{ row }">
          <el-tag :type="getTagType(Number(row.state))" effect="dark">
            {{ getOrderStatusLabel(row.state) }}
          </el-tag>
        </template>
        <template #menu-left="{ row }">
          <el-button class="btn" type="danger" @click="delsHandler" v-if="ids.length">
            批量删除
          </el-button>
        </template>
      </avue-crud>
    </div>
    <el-dialog v-model="centerDialogVisible" title="" width="440" destroy-on-close center class="custom-dialog">
      <div class="swal2-header">
        <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
        <div class="swal2_fs">{{ Poptitle }}</div>
      </div>
      <div class="swal2_he">请仔细核对</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" class="btn btn-primary" @click="confirm">
            确认
          </el-button>
          <el-button class="btn" type="" @click="centerDialogVisible = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="Withdrawalfailed" title="提现失败" width="600" destroy-on-close center>
      <avue-form ref="formCom" :option="inputData" v-model="failCause" @submit="submithandler"></avue-form>
    </el-dialog>
    <el-dialog v-model="crudData.confirmDeleteVisible" title="" width="440" destroy-on-close center class="custom-dialog">
      <div class="swal2-header">
        <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
        <div class="swal2_fs">确认删除？</div>
      </div>
      <div class="swal2_he">ID - {{ crudData.delIds }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button color="#488C6D" class="btn btn-primary" @click="handleDeleteConfirm">
            确认
          </el-button>
          <el-button class="btn" type="" @click="handleDeleteCancel">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import TitleComponent from "@/components/title/index.vue";
import BasicContainer from "@/components/basic-container/main.vue";
import { useRouter } from "vue-router";
import { getList, remove, update, amountCount } from "@/api/refersh/WithdrawList.js";
const ids = computed(() => (crudData.selectionList.map(item => item.id)))
import { getUserProfile } from "@/api/system/user";
const centerDialogVisible = ref(false); //弹框
const Withdrawalfailed = ref(false); //失败弹框
const formCom = ref('')
const failCause = ref('')
const Poptitle = ref("确认直接成功?"); //弹框标题
const SelectList = ref([]); //选中
// 输入框
const inputData = {
  column: [
    {
      label: "拒绝理由",
      prop: "failCause",
      size: "large",
      span: 24,
      rules: [
        {
          required: true,
          message: '请输入拒绝理由',
          trigger: 'blur',
        },
      ],
    },
  ],
};
const router = useRouter();
const option = reactive({
  span: 6,
  data: [
    {
      title: "提现金额",
      count: "0.00",
      icon: "el-icon-message",
      color: "#00a7d0",
    },
    {
      title: "到账金额",
      count: "0.00",
      icon: "el-icon-message",
      color: "#00a7d0",
    },
  ],
});

const crudData = reactive({
  count: {},
  userType: '',
  user: {},
  state: 0,
  roleGroup: {},
  postGroup: {},
  loading: true,
  rowData: {
    state: 0
  },
  delIds: '',
  selectionList: [],
  confirmDeleteVisible: false,
  form: {
  },
  page: {
    pageSize: 10,
    currentPage: 1,
    total: 1,

  },
  openTyep: '',
  query: {},
  data: [],
  Listoption: {
    menu: false,
    delBtn: false,
    editBtn: false,
    selection: true,
    excelBtn: true,
    border: true,
    indexWidth: 100,
    index: true,
    expandLevel: 3,
    height: 'auto',
    calcHeight: '8',
    headerAlign: "center",
    align: "center",
    tree: true,
    labelWidth: 100,
    tip: false,
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    addBtn: false,
    column: [
      {
        label: "订单号",
        prop: "orderNumber",
      },
      {
        label: "用户账户",
        prop: "userAccount",
      },
      {
        label: "所属代理",
        prop: "agencyType",
      },
      {
        label: "用户编号",
        prop: "userId",
      },
      {
        label: "用户等级",
        prop: "vipName",
      },
      {
        label: "资金类型",
        prop: "fundType",
        span: 24,
      },
      {
        label: "提现类型",
        prop: "withdrawalType",
        filterMethod: function (value, row, column) {
          return row.withdrawalType === value;
        },
        width: 100,
        filters: true,
        span: 24,
        type: 'select',
        dicData: [
          {
            label: '用户余额',
            value: '1'
          },
          {
            label: '用户押金',
            value: '2'
          },
        ]
      },
      {
        label: "提现金额",
        prop: "cashAmount",
      },
      {
        label: "手续费",
        prop: "serviceCharge",
      },
      {
        label: "到账金额",
        prop: "amountReceive",
      },
      {
        label: "更新时间",
        prop: "updateTime",
      },
      {
        label: "提现账号",
        prop: "userAccount",
      },
      {
        label: "状态 ",
        prop: "state",
        width: 130,
        dataType: 'number',
        filters: true,
        filterMethod: function (value, row, column) {
          return row.state === value;
        },
        span: 24,
        type: 'select',
        dicData: [
          { label: "代理审核中", value: 1 },
          { label: "代理审核通过", value: 2 },
          { label: "代理审核失败", value: 3 },
          { label: "管理员审核中", value: 4 },
          { label: "管理员审核通过", value: 5 },
          { label: "管理员审核失败", value: 6 },
          { label: "通道转帐中", value: 7 },
          { label: "通道转账成功", value: 8 },
          { label: "通道转账失败", value: 9 },
        ],
      },

      {
        label: "失败原因",
        prop: "failCause",
        display: false
      },
      {
        label: "操作",
        prop: "menu",
        width: 60,
        slot: true,
      },
    ],
  },

});
function getUser() {
  getUserProfile().then(response => {
    console.log('aaaaaaa', response);
    crudData.user = response.data;
    crudData.userType = response.data.userType
    crudData.roleGroup = response.roleGroup;
    crudData.postGroup = response.postGroup;

  });
};

getUser();
async function getAmountCount() {
  let { data: res } = await amountCount()
  option.data[0].count = res.tx
  option.data[1].count = res.dz
  console.log('res===', res);

}
getAmountCount()
const handleDeleteCancel = () => {
  crudData.confirmDeleteVisible = false;
}

const handleDeleteConfirm = async () => {

  await remove(crudData.delIds)
  crudData.confirmDeleteVisible = false;
  onLoad(crudData.page)
}
const selectionChange = (list) => {
  crudData.selectionList = list
}
const delsHandler = async () => {
  crudData.confirmDeleteVisible = true
  let id = ids.value
  console.log('ids', ids);
  crudData.delIds = id.join(',')
}
const submithandler = async () => {
  formCom.value.validate(async (valid: any, done: () => void, msg: any) => {
    if (valid) {

      await update(Object.assign(crudData.rowData, { state: crudData.state, failCause: failCause.failCause }))
      Withdrawalfailed.value = false;
      onLoad(crudData.page)
    }
  })


}
const refreshChange = () => {
  onLoad(crudData.page);
}
const onLoad = (page, params = {}) => {
  crudData.loading = false;
  getList(page.currentPage, page.pageSize, Object.assign(params, crudData.query)).then(res => {
    console.log('getReviewLog--', res);
    const Data = res.data;
    crudData.page.total = Data.total;
    crudData.data = Data.records
    // .map(item=>({...item,rent: '12-24'}));
    crudData.loading = false;
  });
}
// 确认
const confirm = async () => {
  await update(Object.assign(crudData.rowData, { state: crudData.state }))
  centerDialogVisible.value = false;
  onLoad(crudData.page)

};
const cellClickHandler = (row) => {
  console.log(row, 'DDDDD');
  SelectList.value = [];
  SelectList.value = row;
  console.log('DDDD')
};

const editRow = async (state, form) => {
  crudData.rowData = form
  console.log(state);
  if (state == "daili_success") {
    Poptitle.value = "确认代理审核成功吗?";
    centerDialogVisible.value = true;
    crudData.state = 2
  } else if (state == "daili_fail") {
    Poptitle.value = "确认代理审核失败吗?";
    centerDialogVisible.value = true;
    crudData.state = 3

  } else if (state == "admin_success") {
    Poptitle.value = "确认管理员审核成功吗?";
    centerDialogVisible.value = true;
    crudData.state = 5 // 7
  } else if (state == "admin_fail") {
    Poptitle.value = "确认管理员审核失败吗?";
    centerDialogVisible.value = true;
    crudData.state = 6
  } else if (state == "azhuaning") {
    Poptitle.value = "确认通道转帐中吗?";
    centerDialogVisible.value = true;
    crudData.state = 7
  } else if (state == "zhuan_success") {
    Poptitle.value = "确认转帐成功吗?";
    centerDialogVisible.value = true;
    crudData.state = 8
  } else if (state == "zhuan_fail") {
    Poptitle.value = "确认转帐失败吗?";
    Withdrawalfailed.value = true;
    crudData.state = 9
  }
};


const getTagType = (state) => {
  console.log('111', state);

  switch (state) {
    case 1:
    case 4:
    case 7:
      return "warning";
    case 2:
    case 5:
    case 8:
      return "success";
    case 3:
    case 6:
    case 9:
      return "danger";
    default:
      return "";
  }
};

const getTagEffect = (state) => {
  switch (state) {
    case 1:
      return "dark";
    case 2:
      return "plain";
    case 3:
      return "light";
    default:
      return "dark";
  }
};

const getOrderStatusLabel = (state) => {
  const statusMap = {
    "1": "代理审核中",
    "2": "代理审核通过",
    "3": "代理审核失败",
    "4": "管理员审核中",
    "5": "管理员审核通过",
    "6": "管理员审校失败",
    "7": "通道转帐中",
    "8": "通道转账成功",
    "9": "通道转账失败"
  };
  return statusMap[state] || "未知状态";
};
</script>

<style scoped lang="scss">
::v-deep .el-tag {
  color: #fff;
}

.d_block {
  margin: 1rem;
  padding-bottom: 0 !important;
  display: flex;

  .btn {
    color: #4e9876;
    border-color: #4e9876;
  }
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}

.custom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-header {
  margin: 1rem;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  zoom: normal;
  border: 0.25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92%;
  font-size: 3.75em;
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}

.swal2_fs {
  margin: 0 0 0.4em;
  padding: 0;
  font-size: 25px;
  color: #595959;
  text-align: center;
  font-weight: 400 !important;
}

.swal2_he {
  text-align: center;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  word-wrap: break-word;
}

.btn {
  padding: 0.54rem 1.2rem !important;
  height: 34px;
  line-height: 1.2;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
    0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}

.btn-primary {
  color: #fff;
  background-color: #4e9876;
  border-color: #4e9876;
}

.avue-form__group ::v-deep .el-form-item {
  width: 800px !important;
}
</style>
